M
MLOG
React leno nalaganje: Razdeljevanje kode komponent za optimizirano delovanje | MLOG | MLOG ); } export default ImageGallery;

In komponenta Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

V tem primeru je vsaka slika ovita v komponento <Suspense>, zato se bo za vsako sliko med nalaganjem prikazalo sporočilo o nalaganju. To preprečuje, da bi se celotna stran blokirala med prenosom slik.

Napredne tehnike in premisleki

1. Meje napak (Error Boundaries)

Pri uporabi lenega nalaganja je pomembno obravnavati morebitne napake, ki se lahko pojavijo med postopkom nalaganja. Za lovljenje teh napak in prikaz nadomestnega uporabniškega vmesnika lahko uporabite meje napak. Komponento za mejo napak lahko ustvarite takole:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Posodobi stanje, da bo naslednje renderiranje prikazalo nadomestni UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Napako lahko tudi zabeležite v storitev za poročanje o napakah
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Prikažete lahko katerikoli nadomestni UI po meri
      return 
Prišlo je do napake.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Nato ovijte komponento <Suspense> z <ErrorBoundary>:



  Nalaganje...}>

Če pride do napake med nalaganjem komponente MyComponent, jo bo <ErrorBoundary> ujel in prikazal nadomestni uporabniški vmesnik.

2. Prikazovanje na strani strežnika (SSR) in leno nalaganje

Leno nalaganje se lahko uporablja tudi v povezavi s prikazovanjem na strani strežnika (SSR) za izboljšanje začetnega časa nalaganja vaše aplikacije. Vendar pa to zahteva nekaj dodatne konfiguracije. Zagotoviti morate, da strežnik pravilno obravnava dinamične uvoze in da so komponente, naložene leno, pravilno hidrirane na strani odjemalca.

Orodja, kot sta Next.js in Gatsby.js, ponujajo vgrajeno podporo za leno nalaganje in razdeljevanje kode v SSR okoljih, kar postopek močno olajša.

3. Prednalaganje komponent, ki se nalagajo leno

V nekaterih primerih boste morda želeli prednaložiti komponento, ki se nalaga leno, preden je dejansko potrebna. To je lahko koristno za komponente, ki bodo verjetno kmalu renderirane, kot so komponente pod pregibom strani, za katere je verjetno, da se bo uporabnik pomaknil do njih. Komponento lahko prednaložite z ročnim klicem funkcije import():


import('./MyComponent'); // Prednaloži MyComponent

S tem se bo komponenta začela nalagati v ozadju, tako da bo na voljo hitreje, ko bo dejansko renderirana.

4. Dinamični uvozi z Webpack "čarobnimi komentarji"

Webpackovi "čarobni komentarji" omogočajo prilagajanje imen generiranih kosov kode. To je lahko koristno za odpravljanje napak in analizo strukture svežnjev vaše aplikacije. Na primer:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

To bo ustvarilo kos kode z imenom "my-component.js" (ali podobnim) namesto generičnega imena.

5. Izogibanje pogostim pastem

Primeri in primeri uporabe iz resničnega sveta

Leno nalaganje se lahko uporablja v širokem naboru scenarijev za izboljšanje delovanja React aplikacij. Tukaj je nekaj primerov:

Primer: Mednarodna spletna trgovina

Predstavljajte si spletno trgovino, ki prodaja izdelke po vsem svetu. Različne države imajo lahko različne valute, jezike in kataloge izdelkov. Namesto da bi naložili vse podatke za vsako državo vnaprej, lahko uporabite leno nalaganje za nalaganje podatkov, specifičnih za lokacijo uporabnika, šele ko ta obišče stran.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcija za določitev države uporabnika

  return (
    Nalaganje vsebine za vašo regijo...}>
      
      
    
  );
}

Zaključek

Leno nalaganje in razdeljevanje kode komponent sta močni tehniki za optimizacijo delovanja React aplikacij. Z nalaganjem komponent šele takrat, ko so potrebne, lahko znatno skrajšate začetni čas nalaganja, izboljšate uporabniško izkušnjo in izboljšate svoj SEO. Vgrajeni komponenti Reacta React.lazy() in <Suspense> olajšata implementacijo lenega nalaganja v vaših projektih. Uporabite te tehnike za gradnjo hitrejših, bolj odzivnih in privlačnejših spletnih aplikacij za globalno občinstvo.

Ne pozabite vedno upoštevati uporabniške izkušnje pri implementaciji lenega nalaganja. Zagotovite informativne nadomestne uporabniške vmesnike, elegantno obravnavajte morebitne napake in skrbno analizirajte delovanje vaše aplikacije, da zagotovite doseganje želenih rezultatov. Ne bojte se eksperimentirati z različnimi pristopi in najti najboljšo rešitev za vaše specifične potrebe.